// 验收/标准巡检 项的设置界面
import { Input } from "@tarojs/components";
import { useReactive } from "ahooks";

import ByCell from "@/components/ui/ByCell";
import ByRadio from "@/components/ui/ByRadio";
import Uploader from "@/components/app/Uploader";
import ByCellGroup from "@/components/ui/ByCellGroup";
import ByImageGroup from "@/components/ui/ByImageGroup";

const cellProps = {
  border: true,
  labelWidth: "5em",
};

export default ({ source, index }) => {
  const model = useReactive(source);

  const handleRadio = (checked, index) => {
    const list = model.options.map((e) => {
      e.isCheck = false;
      return e;
    });

    const option = list[index];
    option.isCheck = checked;
    model.options = list;
  };

  const updatePic = (newPics: string[]) => {
    let list = (model.picList || []) as string[];
    list = list.concat(newPics);
    model.picList = list;
  };

  return (
    <ByCellGroup className="m-3" title={index + "." + source.quesName}>
      <ByCell label="合格状态" {...cellProps}>
        {model.options.map((option, index) => (
          <ByRadio
            key={option.optionsId}
            checked={option.isCheck}
            className="mr-3"
            onChange={(e) => handleRadio(e, index)}
          >
            {option.optionsName}
          </ByRadio>
        ))}
      </ByCell>
      <ByCell label="备注" {...cellProps}>
        <Input
          value={model.quesRemark}
          className="w-full"
          placeholder="点击输入备注"
          onInput={(e) => (model.quesRemark = e.detail.value)}
        />
      </ByCell>

      <ByCell label="照片" vertical {...cellProps}>
        <ByImageGroup
          showDelete
          urls={model.picList}
          slotFooter={
            <Uploader
              // openWatermask
              onSuccess={updatePic}
            />
          }
        />
      </ByCell>
    </ByCellGroup>
  );
};
